<template>
    <div class="layout" id="app">
        <Layout v-if="$store.state.loginstatus">
            <Header>
                  <appHeader></appHeader>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}" >
                    <appMenu></appMenu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <router-view/>
                </Layout>
            </Layout>
        </Layout>
        <Layout v-if="!$store.state.loginstatus">
            <router-view/>
        </Layout>
    </div>
</template>

<script>
// 在localStorage中定义一个值，当进登录页的时候，将其赋值为false  header menu用v-if判断一下就好~
import appHeader from './components/public/app-header.vue';
import appMenu from './components/public/app-menu.vue';

export default {
  name: 'App',
  components: { appHeader, appMenu },
};
</script>

<style scoped>
.layout{
    /* border: 1px solid #d7dde4; */
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.layout-menu{
    width: 100%;
    height: 100%;
}
</style>
